<template>
  <div class="product">
    <!-- 点单页 -->
    <!-- 固定栏：搜索框、店名、自取外卖、通知 -->
    <div style="width: 100%; height: 110px">
      <div class="product-search">
        <van-search
          v-model="value"
          shape="round"
          background="#faebd7"
          placeholder="搜索商品"
        />
        <div class="d-flex justify-content-between product-btn">
          <router-link to="">
            <p>店名<span>></span></p>
          </router-link>
          <div class="btns">
            <button class="btnone">自取</button>
            <button class="btntwo">外卖</button>
          </div>
        </div>
        <van-notice-bar left-icon="volume-o" text="欢迎购买" />
      </div>
    </div>

    <!-- 点单区 -->
    <div class="product-order row">
      <!-- 点单区-商品分类 -->
      <div class="col-3 position-fixed">
        <ul>
          <li
            v-for="(item, i) of categoryName"
            :key="i"
            @click="changeCategory(item.scId)"
          >
            {{ item.categoryName }}
          </li>
        </ul>
      </div>
      <!-- 点单区-商品详情 -->
      <div class="col-9 position-fixed">
        <div>分类</div>
        <div
          class="product-order-goods d-flex"
          v-for="(item, i) of shopName"
          :key="i"
        >
          <div class="product-order-goods-pic">
            <img :src="item.coverImg" />
          </div>
          <div class="product-order-goods-text">
            <h6>{{ item.shopName }}</h6>
            <p>
              {{ item.shopIntroduction }}
            </p>
            <div class="d-flex justify-content-between">
              <h6>￥{{ item.originalPrice.toFixed(2) }}</h6>
              <div>
                <!-- 调用 components/Number.vue(数量加减) -->
                <number-add></number-add>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 购物车显示 -->
    <van-goods-action
      style="margin-bottom: 55px; border-top: 1px solid #d3d3d3"
    >
      <van-goods-action-icon icon="cart-o"  :badge="totalNum" text="购物车" @click="onClickIcon" />
      <div class="width:100px;height:50px">￥2500.00</div>
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
    </van-goods-action>

    <!-- 底部导航栏 -->
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="home">
        <img slot="icon" src="../assets/logo.png" />
        <span>首页</span>
      </mt-tab-item>
      <mt-tab-item id="productList">
        <img slot="icon" src="../assets/logo.png" />
        <span>点单</span>
      </mt-tab-item>
      <mt-tab-item id="order">
        <img slot="icon" src="../assets/logo.png" />
        <span>订单</span>
      </mt-tab-item>
      <mt-tab-item id="my">
        <img slot="icon" src="../assets/logo.png" />
        <span>我的</span>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import numberAdd from "../components/Number.vue";

export default {
  name: "Product",
  components: {
    numberAdd,
  },
  data() {
    return {
      selected: "/product", //底部导航栏默认选择点单页
      value: "", //搜索框
      categoryName: [], //商品分类
      shopName: [], //商品信息
      categoryId: "1", // 商品类别 Id,设置初始值为1
      shopAll: [], //打开获取所有商品
      totalNum:0
    };
  },
  methods: {
    // 封装函数：获取商品分类
    getShopCategory() {
      this.axios.get("/api/shop/getShopCategory").then((result) => {
        //console.log(result.data.data); //(3) [{…}, {…}, {…}]
        this.categoryName = result.data.data;
      });
    },

    //封装函数：获取商品详细信息
    getShopByCategory() {
      this.axios
        .get("/api/shop/getShopByCategory", {
          params: { categoryId: this.categoryId },
        })
        .then((result) => {
          //console.log(result.data.data);
          this.shopName = result.data.data;
        });
    },

    // 封装函数：点击商品分类获取对应的商品信息
    changeCategory(categoryId) {
      this.categoryId = categoryId;
      // console.log(categoryId);
      // console.log(this.categoryId);
      this.getShopByCategory();
    },

    //封装函数：获取所有商品（放弃使用）
    getshopAll() {
      this.axios
        .get("/api/shop/getShopAll", {
          params: {
            pageNum: 1,
            pageSize: 10,
          },
        })
        .then((result) => {
          //console.log(result);
        });
    },

    onClickIcon() {
      Toast("点击图标");
    },
    onClickButton() {
      Toast("点击按钮");
    },
  },
  watch: {
    selected(newval, oldval) {
      if (newval == "home") {
        this.$router.push("/");
      } else if (newval == "order") {
        this.$router.push("/order");
      } else if (newval == "product") {
        this.$router.push("/product");
      }
    },
  },
  mounted() {
    this.getShopCategory(); //获取商品分类
    this.getShopByCategory(); //根据商品分类获取商品
    this.getshopAll(); //获取所有
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #000;
}

.van-stepper__input {
  width: 16px !important;
}

.product {
  .product-search {
    position: fixed;
    width: 100%;
    // background-color: #fff;
    .product-btn {
      height: 36px;
      line-height: 36px;
      .btns {
        button {
          width: 50px;
          height: 36px;
          border: 0px;
        }
        .btnone {
          border-top-left-radius: 15px;
          border-bottom-left-radius: 15px;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          background-color: black;
          color: #fff;
        }
        .btntwo {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          border-top-right-radius: 15px;
          border-bottom-right-radius: 15px;
          background-color: #ccc;
          color: #000;
        }
      }
    }
    .van-notice-bar {
      height: 20px;
    }
  }

  .product-order {
    width: 100%;
    margin-bottom: 105px;
    & > :nth-child(1) {
      overflow-y: scroll;
      line-height: 10vh;
      text-align: center;
      top: 110px;
      bottom: 105px;
      ul li {
        width: 10vh;
        height: 10vh;
        border: 2px solid #e6e6fa;
        border-bottom: 0px;
        &:last-child {
          border-bottom: 2px solid #e6e6fa;
        }
      }
    }
    & > :nth-child(2) {
      overflow-y: scroll;
      &::-webkit-scrollbar {
        width: 0 !important;
      }
      top: 110px;
      left: 12vh;
      bottom: 105px;
      // right: 1vh;
      .product-order-goods {
        height: 150px;
        background-color: #faebd7;
        margin-bottom: 25px;
        border-radius: 10px;
        // padding: 0;
        .product-order-goods-pic {
          margin-right: 5px;
          img {
            width: 15vh;
            height: 12vh;
            margin-top: 35px;
            border: 1px solid black;
          }
        }

        .product-order-goods-text {
          h6 {
            font-weight: 800;
            margin-bottom: 5px;
          }
          p {
            font-size: 12px;
            height: 100px;
            text-indent: 2em;
            line-height: 2;
            //超出的文本隐藏
            overflow: hidden;
            // 溢出用省略号显示
            text-overflow: ellipsis;
            //将对象作为弹性伸缩盒子模型显示。
            display: -webkit-box;
            //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
            -webkit-box-orient: vertical;
            //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数
            -webkit-line-clamp: 4;
          }
          .text-btns {
            display: inline-block;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-color: gold;
            text-align: center;
            line-height: 18px;
            font-size: 18px;
          }
          .text-num {
            display: inline-block;
            width: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>